<!-- 页面 -->
<template>
    <div>
        <p>商品分类</p>
        <van-search shape="round" background="orange" placeholder="请输入搜索关键词" />
        <div class="hang1">
            <div class="left">
                <van-sidebar v-model="activeKey" @chang="chang1">
                    <van-sidebar-item :title="item.catename" v-for="item in list" :key="item.id" />
                </van-sidebar>
            </div>
            <div class="right">
                <van-grid :column-num="3">
                    <van-grid-item v-for="item in list1" :key="item.id" :text="item.catename" :icon="url + item.img" />
                </van-grid>
            </div>
        </div>



    </div>
</template>
<!--vue -->
<script>
export default {
    name: 'cateIndex',
    //存放数据
    data() {
        return {
            //声明的属性
            activeKey: 0,
            list: [],
            list1: [],
            list2:[],
            url: "https://api.aslegou.top/"
        }
    },
    //生命周期函数
    mounted() {
    },
    created() {
        this.getList1()
        this.getList2()
    },
    //调用方法
    methods: {
        async getList1() {
            let res = await this.$http.get('/getcates')
            // console.log(res);
            this.list = res.data.list
            this.list1 = res.data.list.children
            // console.log(this.list, '123');
            // console.log(this.list1);
        },
        async getList2() {
            let res = await this.$http.get('/getcates')
            console.log(res)
            this.list1 = res.data.list[0].children
            console.log(this.list1);
        },
        chang1(i){
            let type = this.list1[i].type
            this.lsit2=this.list1.filter(item => item.type.includes(type))
        }
    },
    //监听器
    watch: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
    //自定义指令
    directives: {},
}
</script>
<!-- css样式 -->
<style >
* {
    margin: 0;
    padding: 0;
}

p {

    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: white;
    font-weight: 600;
    background-color: orange;
}

.hang1 {
    width: 100%;
    /* height: 100vw; */
    display: flex;
    justify-content: space-between;
}

.left {
    width: 30%;

}

.right {
    width: 69vw;
}
.van-sidebar{
width: 400px;
}
</style>
